<!--
gradeSubjectArr grade
subjectArr subject
chapterListArr
chapter
questionListArray
qName
-->

<!--
QPGradeVOArr
ceGradeId
QPSubjectVOArr
subuid
QPChapterVOArr
chapterId
QPQuestionVOArr
QPQuestionVOArr.selectedQuestionArr()
questionId
isSelected
layout
qStem
$parent.SelectedQuestionId()
$root.viewQuestionClick()

-->
<div class="sectionContainer">
	<div class=" floatleft">
		<!-- <h2 class="title2"> Chapters 1,2,3 </h2> -->
		<div class="clearBoth"></div>
	</div>
	<div class="clearBoth"></div>

	<div class="marginBottom">
		<div class="floatleft">
			<label class="bold displayBlock marginBottom5"> Grade </label>
			<select class="select width180" data-bind="options: QPGradeVOArr, optionsText: 'gradeTitle', optionsValue: 'ceGradeId', value: ceGradeId, event: {change: $root.onGradeChange}, optionsCaption: 'Select a Grade'"></select>
		</div>
		<div class="floatleft marginLeft20">
			<label class="bold displayBlock marginBottom5"> Subject </label>
			<select class="select width180" data-bind="options: QPSubjectVOArr, optionsText: 'title', optionsValue: 'subuid', value: subuid, event: {change: $root.onSubjectChange}, optionsCaption: 'Select a Subject'"></select>
		</div>

		<div class="floatleft marginLeft20">
			<label class="bold displayBlock marginBottom5"> Chapters </label>
			<select class="select width180" data-bind="options: $root.QPChapterVOArr, optionsText: 'chapterTitle', optionsValue: 'chapterId', value: chapterId, event: {change: $root.onChapterChange}, optionsCaption: 'Select a Chapter'"></select>
		</div>

		<div class="floatleft marginLeft20">
			<label class="bold displayBlock marginBottom5"> Filter by: </label>
			<div id="shifts" class="floatleft">
				<div id="rad_buttons" data-bind="foreach: EdgeArr">
					<span data-bind="text:title, click:$parent.changeSearchMode, id:$index()"> Test Edge </span>
				</div>
			</div>
		</div>

	</div>
	<div class="clearBoth"></div>

	<div class="clearBoth"></div>
	<div class="marginBottom paddingTB">
		<h2 class="title3 bold floatleft marginBottom5"><span class="gray">Search Results:</span><span data-bind="text: QPQuestionVOArr().length" >120</span> questions</h2>
		<!-- ko if: $root.searchSource() == $root.INSERT_QUESTIONSET_CLICK -->
		<h2 class="floatright ">You have selected <span data-bind="text: QPQuestionVOArr.selectedQuestionArr().length">2</span> questions.</h2>
		<!-- /ko -->
	</div>

	<div class="clearBoth"></div>
	<!-- <div class="scroll-pane32 border"> -->
	<div class="scroll-pane33 border">
		<!-- questionListTable template -->
		<div data-bind="template: { name: 'questionListTable_template',templatePrefix: 'questionpapers/', data: $data}"></div>
	</div>
	<div class="clearBoth"></div>

	<div class="marginBottom marginTop floatleft">
		<!-- ko if: QPQuestionVOArr.selectedQuestionArr().length > 0 -->
		<a data-bind="click: insertSelectedQuestions,text: submitButtonStr" href="#" class="te-button buttonBlue floatleft" id="okay">Insert Selected Questions</a>
		<!-- /ko -->
		<!-- ko ifnot: QPQuestionVOArr.selectedQuestionArr().length > 0 -->
		<a data-bind="text: submitButtonStr" class="te-button buttonGrayDisabledButton floatleft" id="okay">Insert Selected Questions</a>
		<!-- /ko -->
		<a data-bind="click: cancelSearchQP" href="#" class="te-button buttonGray floatleft marginLeft" id="cencel">Cancel</a>
	</div>

	<div class="clearBoth"></div>
</div>
<!--EO container-->